<template>
    <div class='title'>问题验证
      <div class="content">
        <!--查询-->
        <el-row>
          <el-form class="toolForm"
            :inline="true"
            :model="filterQuery"
            @submit.native.prevent="companySearch">
            <el-form-item label="受检单位：" >
              <treeselect
                :multiple="false"
                :options="options"
                placeholder="选择单位"
                v-model="filterQuery.companyCode"
                style="width:250px"/> 
            </el-form-item>
            <el-form-item label="检查时间：">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width:300px">
              </el-date-picker>
           </el-form-item>
           <el-form-item>
              <el-button 
              type="primary"
              native-type="submit"
              icon='el-icon-search'>
              查询</el-button>
           </el-form-item>
           <el-form-item>
              <el-button type="primary"
              @click="export2Excel()">
              导出Excel</el-button>
           </el-form-item>
         </el-form>
       </el-row>
       
       <!--问题列表-->
       <el-table
        :data="cq_tableData"
        v-loading="loading"
        border
        @row-click="clickTable"
        ref="refTable"
        style="width:100%">
        <el-table-column type="expand">
          <!--查看详情的表单-->
          <template slot-scope="props">
            <el-form label-position="left"
            inline class="table-expand"
            label-width="130px">
             <el-row>
              <el-col :span="12">
                <el-form-item label="检查人员：">{{ props.row.checkPerson}}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查日期：">{{ props.row.checkDate }}
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="单位：">{{ props.row.parentCompanyName }}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="基层单位：">{{ props.row.basicCompanyName }}
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="班组：">{{ props.row.companyName }}
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="检查地点：">{{ props.row.checkStation }}
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item  label="检查表：">{{ props.row.checkListItemName }}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="检查项目：">{{ props.row.checkItem }}</el-form-item>
              </el-col>
            </el-row>           
            <el-row>
                <el-form-item  label="检查项：">{{ props.row.checkListItemName }}</el-form-item>
            </el-row>
            <el-row>
                <el-form-item  label="问题描述：">{{ props.row.description }}</el-form-item>
            </el-row>>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题类型：">{{ props.row.problemType }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="问题程度：">{{ props.row.problemRank }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="问题体系要素：">{{props.row.hseFactor}}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题原因：">{{ props.row.problemSource }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item  label="依据：">{{ props.row.problemGist }}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="责任人：">{{ props.row.responsePersonName }}</el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="用工性质：">{{ props.row.employmentProperty }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="岗位工龄：">{{ props.row.workingAge }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="岗位名称：">{{ props.row.workingName }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="整改责任人：">{{ props.row.supervisorName }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
        </el-table-column>
        <!-- 问题列表，显示在table里面的内容 -->
        <el-table-column 
        type="index" 
        :index="this.indexStartNum" 
        label="序号" width="50">
        </el-table-column>
        <el-table-column
          label="单位"
          prop="parentCompanyName"
          header-align="center"
          min-width="120px">
        </el-table-column>
        <el-table-column
          label="基层单位"
          prop="basicCompanyName"
          header-align="center"
          min-width="120px">
        </el-table-column>
        <el-table-column
          label="班组"
          prop="companyName"
          header-align="center"
          min-width="100px">
        </el-table-column>
        <el-table-column
          label="问题描述"
          prop="description"
          header-align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="检查人员"
          prop="checkPerson"
          header-align="center"
          min-width="80px"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="检查时间"
          prop="checkDate"
          header-align="center"
          min-width="110px"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="问题程度"
          prop="problemRank"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="责任人"
          prop="responsePersonName"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="问题状态"
          prop="status"
          header-align="center">
        </el-table-column>
        <el-table-column
          label="整改责任人"
          prop="supervisorName"
          header-align="center"
          min-width="100px">
        </el-table-column>
        <el-table-column 
        label="操作" 
        align="center" 
        min-width="150px"
        header-align="center">
          <template slot-scope="scope">
            <div class="inline-td">
                  <router-link :to='{name: "CQVerify", params: {id: scope.row.checkRecordID}}' >
                    <el-button size="mini" type="primary"><i class="el-icon-edit"></i>验证</el-button>
                  </router-link>
                  <!--el-button size="mini" type="warning" @click="showDialog(scope.row.checkRecordID)">
                    <i class="el-icon-sort"></i>移交</el-button-->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="pageChange"
          :current-page="filterQuery.pageIdx"
          :page-size="filterQuery.pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <!-- 指定验证人 -->
    <!--el-dialog
    title="指定审核人"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form>
      <el-form-item
      label="审核人">
      <el-select
      v-model="updataForm.verifyPersonID"
      placeholder="请指定审核人"
      style="width:50%" 
      filterable 
      clearable>
      <el-option 
      v-for="item in verifyPersonOptions"
      :key="item.id"
      :label="`${item.name}`"
      :value="item.employeeID">
      </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancelSetVerifyPerson">取 消</el-button>
    <el-button type="primary" @click="setVerifyPerson">确 定</el-button>
    </span>
    </el-dialog-->

  </div>
</template>

<script>
import {GetCQCompany, GetCQPersonNeedCheckRecord} from '../../../services/cq_problem_acceptance'
//import {CQGetverifyPerson, UpdateCQVerifyPerson} from '../../../services/cq_problem_acceptance'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)


const DefaultQuery = {  
  companyCode: null,
  checkDate1: '',
  checkDate2: '',
  status: '未验证',
  pageIdx: 1,
  pageSize: 10,
}

const DefaultQueryExcel = {
  companyCode: null,
  checkDate1:'',
  checkDate2:'',
  status: '未验证',
  pageIdx: 1,
  pageSize: 10,
  type:'all'
}

export default {
  components: { Treeselect },
  data() {
    return {
      dateRange: [],
      cq_tableData: [],
      filterQuery: {},
      options: [],
      indexStartNum:1,
      total: 0,
      loading: false,
      excelData: [],
      filterQueryExcel: {},
      //dialogVisible: false,
      //verifyPersonOptions: [],
      // updataForm: {
      //   checkrecordID: '',
      //   verifyPersonID: '',
      //   verifyPersonName: ""
      // },
    }
  },
  mounted() {
    this.loadFilterParams()
    this.getCQCompany()
    this.getCQPersonCheckRecord()
  },

  methods: {
    //获取长庆单位名称
    getCQCompany() {
      GetCQCompany().then((res) => {
        this.options = res.data
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    checkFilterParams () {
      //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
      if (this.dateRange && this.dateRange.length === 2) {
        this.filterQuery.checkDate1 = this.dateRange[0]+' '+'00:00:00'
				this.filterQuery.checkDate2 = this.dateRange[1]+' '+'23:59:59'
      } else {
        this.filterQuery.checkDate1 = ''
        this.filterQuery.checkDate2 = ''
      }
    },
    //展示问题
    getCQPersonCheckRecord() {
      this.checkFilterParams()
      this.loading = true
      //筛选验证状态
      this.$router.push({query: this.filterQuery})
      GetCQPersonNeedCheckRecord(this.filterQuery).then((res) => {
        //console.log(JSON.stringify(res.data))
          this.cq_tableData = res.data.list
          this.total = res.data.total
          this.filterQuery.pageIdx = res.data.page
          this.indexStartNum = ((this.filterQuery.pageIdx - 1) * this.filterQuery.pageSize) + 1;
          this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
        this.loading = false
      })
    },
    //点击行显示详情
    clickTable(row) {
      this.$refs.refTable.toggleRowExpansion(row)
      //console.log(JSON.stringify(row.checkRecordID))
    },
    //改变页码
    pageChange (page) {
      this.filterQuery.pageIdx = page
      this.getCQPersonCheckRecord()
    },
    loadFilterParams () {
      //从query读取过滤条件
      this.filterQuery = {...DefaultQuery, ...this.$route.query}
      //从query中取到的参数是string的,要转成element要求的number
      this.filterQuery = {
        ...this.filterQuery,
        pageIdx: parseInt(this.filterQuery.pageIdx, 10),
        pageSize: parseInt(this.filterQuery.pageSize, 10),
      }
      //填充datepicker range组件的内容
      if (this.filterQuery.checkDate1 && this.filterQuery.checkDate2) {
        this.dateRange = [this.filterQuery.checkDate1, this.filterQuery.checkDate2]
      }
    },
    // 导出Excel
    export2Excel() {
      this.filterQueryExcel = {...DefaultQueryExcel, ...this.$route.query}
      this.filterQueryExcel = {
        ...this.filterQueryExcel,
      }
      this.excelData=GetCQPersonNeedCheckRecord(this.filterQueryExcel).then((data) => {
        this.excelData = data.data
        this.loading = false
        //console.log(JSON.stringify(this.excelData))
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['受检单位','受检二级单位','问题描述','地点','检查日期','问题程度','检查人员','问题状态','问题类型',
          '检查级别','任务时间','检查表','检查项目','检查项','问题原因','依据','对应要素',
          '责任人','用工性质','岗位工龄','岗位名称','整改责任人'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['basisCompanyName','secondCompanyName','description',
                             'checkStation','checkDate','problemRank','checkPerson','status','problemType',
                             'checkLevel','verifyDate','checkItem','checkItem','checkListItemName','problemSource','problemGist',
                             'hseFactor','responsePersonName','employmentProperty','workingAge','workingName','supervisorName'];
          // 上面的index、phone_Num、school_Name是tableData里对象的属性
          const list = this.excelData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '列表excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    //查询
    companySearch() {
      this.getCQPersonCheckRecord()
    },
    // showDialog(checkRecordID) {
    //   this.dialogVisible = true
    //   this.updataForm.checkrecordID = checkRecordID
    //   CQGetverifyPerson().then((res) => {
    //     this.verifyPersonOptions = res.data
    //     //console.log(res.data)
    //   })
    //   //console.log(this.updataForm)
    // },
    // cancelSetVerifyPerson() {
    //   this.updataForm = []
    //   this.dialogVisible = false
    // },
  //   setVerifyPerson() {
  //     //console.log(this.updataForm)
  //     UpdateCQVerifyPerson(this.updataForm).then(() => {
  //       this.$message.success('操作成功')
  //       this.dialogVisible = false
  //       }, (err) => {
  //           this.$message.error(err.message)
  //           this.dialogVisible = false
  //         })
  //   },
  }
}
</script>
